<template>
  <div class="left-ppzz">
    <div class="tab-title" :class="isHall?'tab-title1':''">
      <span class="dec">塘栖枇杷种植株数及各品种占比</span>
    </div>
    <div class="tab-content">
      <div ref="myChart" style="height: 360px; width: 100%"></div>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
import { queryPlanNumByeardp } from '@/api/dashboards'
export default {
  data(){
    return{
        totalNum:0,
        chartsData:[]
    }
  },
   props:{
        isHall:{
            type:Number
        }
    },
     watch: {
        isHall:{
            immediate: true,
            handler: function(val) {
                if(val){
                }
            }
        },
    },
  mounted() {
      this.queryPlanNumByeardp()
  },
  methods: {
        async queryPlanNumByeardp() {
            let res = await queryPlanNumByeardp()
            this.chartsData = res.result&&res.result.length&&res.result
            this.initChart()
        },
        initChart() {
        let color = ['#4F4CFF', '#04E9B0', '#FF8300', '#FFC400', '#00DFFF'];
         this.totalNum = this.chartsData.length&&this.chartsData.reduce((c, item) => c + item.plantNum * 1, 0)
        let baseData = [];
        for (var i = 0; i < this.chartsData.length; i++) {
        baseData.push({
            value: this.chartsData[i].plantNum,
            name: this.chartsData[i].plantName,
             label: {
                  color: color[i],
            },
            itemStyle: {
            normal: {
                color:color[i],
                borderRadius:11,
                borderWidth:11,
                borderColor: color[i]
            }
            }
        });
        }
         let myChart = echarts.init(this.$refs.myChart)
        var option = {
           title: [
                {
                    text:this.totalNum,
                    top: this.isHall?'23%':'19%',
                    textAlign: 'center',
                    left: '48.50%',
                    textStyle: {
                        color: '#fff',
                        fontSize: 18,
                        fontWeight: '600',
                    },
                },
                {
                    text:'总量',
                    top: this.isHall?'30%':'26%',
                    textAlign: 'center',
                    left: '48.50%',
                    textStyle: {
                        color: 'rgba(255, 255, 255, 0.4)',
                        fontSize: 12,
                        fontWeight: '400',
                    },
                },
             ],
            // color: color,
            tooltip: {
                show: false,
            },
            legend: {
                show: false
            },
            grid: {
                top: '0',
                left: '50%',
            },
            series: [
                {
                zlevel: 1,
                name: '塘栖枇杷种植株数及各品种占比',
                type: 'pie',
                selectedMode: false,
                radius: [50, 55],
                center: this.isHall?['50%', '29%']:['50%', '24%'],
                startAngle: '140',
                hoverAnimation: false,
                labelLine:{
                    show:false
                },
                 color: this.chartsData.map((l, index) => {
                    return color[index]
                 }),
                label: {
                    normal: {
                    show: true,
                    formatter: ['{c|{c}}', '{b|{b}}'].join('\n'),
                    rich: {
                        b: {
                        fontSize: 14,
                        fontWeight: 600,
                        padding:[0,0,0,2]
                        },
                        c: {
                        fontSize: 12,
                        fontWeight: 400,
                        color: 'rgba(255, 255, 255, 0.6)',
                        }
                    },
                    color: this.chartsData.map((l, index) => {
                    return color[index]
                    }),
                    bleedMargin: "-90",
                    position:"outer",
                    showAbove:true,
                    padding: [0,10, 0, 7],
                    formatter: (params) => {
                        return '●{b| '+params.percent+'%}' + '\n' + '{c| '+params.data.name+'}'
                    },
                    textStyle: {
                        fontSize: 12,
                        lineHeight: 20,
                    },
                    }
                },
                itemStyle: {
                    normal: {
                    }
                },
                data: baseData
                }
            ]
       };
      myChart.setOption(option)
    },
  },
}
</script>
<style lang="less" scoped>
.left-ppzz {
  width: 360px;
  height: 190px;
  color: #fff;
  .tab-title {
      padding: 14px 10px 0 24px;
    .dec {
        width: 196px;
        height: 14px;
        font-size: 14px;
        font-weight: 600;
        color: #FFFFFF;
        line-height: 14px;
    }
  }
  .tab-title1{
      padding: 24px 10px 0 24px;
    .dec {
        width: 196px;
        height: 14px;
        font-size: 14px;
        font-weight: 600;
        color: #FFFFFF;
        line-height: 14px;
    }
  }
  .tab-content {
    width: 360px;
  }
}
</style>